<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景样式基础使用</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 500px;
            height: 300px;
            border: solid 2px red;
            margin: 20px;
            /* <!-- 背景样式 background -->
            <!-- 是渲染背景图层的一套规则
                背景分为两种
                    1.背景图片
                    2，背景颜色 
            --> */
            /* 
                背景图片
                    background-image:url(路径)
                1.图片大于容器，从左上角开始，能展示多少就展示多少超出地方的盒子进行隐藏
                2.图片小于容器，就会进行内容平铺，直到容器铺满
            */
            background: aqua;
            background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.R1F2m_bbIaD-g_GyCaZ6hQHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7);

            /* 设置图片平铺方式 
                1.repeat 平铺
                2.norepeat 不平铺
                3.round 尽可能平铺满整个容器，都会完整展示整个图片
                4.space 保证图片大小不变的情况下，尽可能展示最多的图片
            */
            background-repeat: no-repeat;

            /* 修改背景图片的大小
                初始的图片大小是和图片的原始尺寸一样，可以通过size属性对图片大小进行修改
                1.w和h
                2.auto 自适应，等比例变化
                3.cover 等比例放大置填充满整个容器
                4.contain 等比例放大置填充满一个方向
            */
            /* background-size: cover; */

            /* 调整背景图位置 
                1.x 水平
                2.y 垂直
                3.center
                4.left
                5.right
                6.bottom
                7.top
                后4种可以自由组合
            */
            background-position: 10px 10px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>